<template>
  <div class="home">
    <!-- 轮播图 -->
    <el-carousel height="400px" class="banner">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <div class="banner-item" :style="{ backgroundImage: `url(${item.image})` }">
          <div class="banner-content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
            <el-button type="primary" size="large" @click="$router.push('/courses')">
              立即学习
            </el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 课程分类 -->
    <div class="section">
      <h2 class="section-title">热门课程分类</h2>
      <div class="category-grid">
        <div
          v-for="category in categories"
          :key="category.id"
          class="category-card"
          @click="$router.push(`/courses?category=${category.id}`)"
        >
          <div class="category-icon">
            <el-icon :size="48">
              <component :is="category.icon" />
            </el-icon>
          </div>
          <h3>{{ category.name }}</h3>
          <p>{{ category.count }}门课程</p>
        </div>
      </div>
    </div>

    <!-- 推荐课程 -->
    <div class="section">
      <div class="section-header">
        <h2 class="section-title">推荐课程</h2>
        <el-button text type="primary" @click="$router.push('/courses')">
          查看全部 <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
      
      <div class="course-grid">
        <CourseCard
          v-for="course in recommendedCourses"
          :key="course.id"
          :course="course"
        />
      </div>
    </div>

    <!-- 统计数据 -->
    <div class="section stats-section">
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number">{{ stats.totalStudents }}</div>
          <div class="stat-label">累计学员</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ stats.totalCourses }}</div>
          <div class="stat-label">精品课程</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ stats.totalHours }}</div>
          <div class="stat-label">培训时长(小时)</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ stats.passRate }}%</div>
          <div class="stat-label">考试通过率</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CourseCard from '@/components/CourseCard.vue'
import { getHomeData } from '@/api/home'

const banners = ref([
  {
    id: 1,
    title: '安全生产法规培训',
    description: '全面解读最新安全生产法律法规，提升企业安全管理水平',
    image: 'https://via.placeholder.com/1200x400/409eff/fff?text=安全生产培训'
  },
  {
    id: 2,
    title: '应急管理与救援',
    description: '系统学习应急管理知识，提高突发事件应对能力',
    image: 'https://via.placeholder.com/1200x400/67c23a/fff?text=应急管理培训'
  },
  {
    id: 3,
    title: '职业健康管理',
    description: '关注员工职业健康，构建安全健康的工作环境',
    image: 'https://via.placeholder.com/1200x400/e6a23c/fff?text=职业健康培训'
  }
])

const categories = ref([
  { id: 1, name: '安全生产法规', icon: 'Document', count: 45 },
  { id: 2, name: '应急管理', icon: 'Warning', count: 32 },
  { id: 3, name: '消防安全', icon: 'Fire', count: 28 },
  { id: 4, name: '职业健康', icon: 'FirstAidKit', count: 36 },
  { id: 5, name: '机械安全', icon: 'Tools', count: 24 },
  { id: 6, name: '电气安全', icon: 'Lightning', count: 29 }
])

const recommendedCourses = ref([])
const stats = ref({
  totalStudents: 12580,
  totalCourses: 156,
  totalHours: 3600,
  passRate: 95
})

onMounted(async () => {
  try {
    const response = await getHomeData()
    recommendedCourses.value = response.data.courses
    stats.value = response.data.stats
  } catch (error) {
    console.error('获取首页数据失败:', error)
  }
})
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.banner {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
}

.banner-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
}

.banner-content {
  color: white;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.5);
  padding: 40px;
  border-radius: 8px;
}

.banner-content h2 {
  font-size: 36px;
  margin-bottom: 16px;
}

.banner-content p {
  font-size: 18px;
  margin-bottom: 24px;
}

.section {
  margin-bottom: 60px;
}

.section-title {
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.category-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.category-icon {
  color: #409eff;
  margin-bottom: 16px;
}

.category-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #333;
}

.category-card p {
  color: #666;
  font-size: 14px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.stats-section {
  background: white;
  padding: 60px 40px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  text-align: center;
}

.stat-item {
  padding: 20px;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 16px;
  color: #666;
}
</style>
